<template>
    <div>
      <div class="comentsLeft w938 b87 fl " >
        <h1 class="ml20 mr20 pt25 pb20 bb87"><i class="blueline mr10"></i><b class="f14 c20 vm">评论</b></h1>
        <!--评论框-->
        <table class="w898 bc bb87 c30 f14 fm_songti"  border="0" cellspacing="" cellpadding="">
          <col class="w148 tr"/>
          <col class="w700"/>
          <tr v-if="mainScore == 'true'">
            <td class="pt30 tr">
              <span class="inline-block">总体评价：</span>
            </td>
            <td class="pt30 pl15 pointer">
              <i v-for="(item, index) in 5" :class="(commentData['mainScore']>index)?'redStar mr10':'grayStar mr10'"  @mouseover="hoverStar('mainScore',index)"></i>
            </td>
          </tr>
          <tr v-if="diff == 'true'">
            <td class="pt30 tr">
              <span class="inline-block">难度系数：</span>
            </td>
            <td class="pt30 pl15 pointer">
              <i v-for="(item, index) in 5" :class="(commentData['difficulty']>index)?'redStar mr10':'grayStar mr10'"  @mouseover="hoverStar('difficulty',index)"></i>
            </td>
          </tr>
          <tr>
            <td class="pt30 tr" valign="top">
              <span class="inline-block">评论：&nbsp;&nbsp;</span>
            </td>
            <td   class="pt30 pl15">
              <textarea class="b87 w602 h212 p10 " v-model="commentData['content']" name="" rows="" cols=""></textarea>
            </td>
          </tr>
          <tr>
            <td class="pt30 tr" valign="top">
              <span class="inline-block">上传图片/视频：</span>
            </td>
            <td  class="pt30 pl15" >
              <div  class="fl w100 h100  mr20 pr b87 bg98 tc pointer hoverborder_orgred ">
                <img style="margin-top:43px;" class=" " src="static/images/grayAdd.png" />
                <span style="line-height: 100px;">图片/视频</span>
                <wwUpload @reloadImg="reloadPic" @uploadStateFun="uploadStateFun" style="width:100%;height:100%;position: absolute;top:0px;left:0px;opacity: 0" ></wwUpload>
              </div>
              <a href="javascript:void(0);" class="fl w100 h100 mr20 mb10 pr" v-for="(item, index) in picList"><img :src="(item['flag']===1)?item['fileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100':item['thumFileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100'" width="100" height="100"/><i class="redCloseX" @click="delPic(index)"></i><span v-if="item['flag']===2" class="playBtn"></span></a>
            </td>
          </tr>
          <tr>
            <td class="pt30 tr"></td>
            <td class="pt30 pb30 pl15">
              <button class="pl20 pr20 h28 br2 f12 c100 tc lh28 bg_grn_119c5b" @click="subComment">发表评论</button>
            </td>
          </tr>
        </table>

        <!--评论列表-->
        <div class="comentsList w898 bc pb30">
          <ul>
            <!--单条评论-->
            <li class="clearfix bb87 mt30" v-for="(item,index) in commentsList">
              <img class="fl  w64" :src="item['userImgUrl']" alt="头像" width="64" height="64" style="border-radius:50%"/>
              <dl class="fr w814 pb20  fm_songti" >
                <dt><b class="fm_yahei f14 c30">{{item['userName']}}</b></dt>
                <dd class="mt10 clearfix">
                  <i v-for="(num,iNum) in 5" :class="(item['mainScore']>iNum)?'redStar fl mr5':'grayStar fl mr5'"></i>
                  <button class="fr ml30  bg-alpha100 fn pointer thumbBtn" @click="thumbComment(item['id'],item['praiseStatus'],index)">
                    <img class="vm" :src="(item['praiseStatus'] === 0)?'static/images/like-icon-normal.png':'static/images/like-icon-active.png'" width="16" height="18"/>
                    <span class="fm f16 c60 fn vm">{{item['praiseCount']}}</span>
                  </button>
                </dd>
                <dd class="mt20">
                  <p class="f14 c30 lh180 ">
                   {{item['content']}}
                  </p>
                </dd>
                <!--<dd class="clearfix mt10">-->
                  <!--<a href="#" class="fr c60 f12 MoreBg mr15">展开评论<i class="inline-block w15"></i></a>-->
                <!--</dd>-->
                <dd class="mt10">
                  <p v-for="(img,index) in item['listResource']" style="display: inline-block;position: relative;" @click = "showWView(item['listResource'],index)">
                    <img class="mr10" :src="(img['flag'] === 1)?img['fileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100':img['thumFileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100'" width="100" height="100"/>
                    <span class="playBtn" v-if="img['flag'] === 2"></span>
                  </p>
                </dd>
                <dd class="mt10">
                  <span class="f12 fm c60 ">{{item['addTime']}}</span>
                </dd>
              </dl>
            </li>
          </ul>
          <!--页码-->
          <div class="mt50 mb50 clearfix ">
            <div class="fr f14 fm">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="reqData['pageSize']"
                prev-text = "上一页"
                next-text = "下一页"
                layout="total, prev, pager, next"
                :total="commentTotal">
              </el-pagination>
            </div>
            <!--<p class="fr c60  pt10 pb10 mr25">找到 <span class="c_grn_119c5b mr5 ml5">30</span>个场地</p>-->
          </div><!--页码结束-->
        </div><!--评论列表结束-->
      </div><!--评论comentsLeft结束-->
      <!--<div id="videoShadow" v-if="playState" @click="closeVideo">-->
        <!--<div id="videoPlayBox" @click="stopMaopao">-->
          <!--<playVideo :videoID="videoId"></playVideo>-->
        <!--</div>-->
      <!--</div>-->
      <div id="wviewBox" v-if="viewBoxState">
        <wview :imgLists = "wviewImages" :Index="wViewIndex" @closeView="closeView"></wview>
      </div>
    </div>
</template>

<script>
  import Utils from "../assets/Util";
  import wwUpload from './wwUpload';
  import wview from './wview';
  export default {
    name: 'comments',
    props:{
      myUrls:Object,
      myReqData:Object,
      myThumbData:Object,
      myThumbKey:String,
      myPicListKey:String,
      myMainScore:String,
      myDiff:String
    },
    components:{
      wwUpload,
      wview
    },
    data(){
      return {
        Urls:this.myUrls,
        reqData:this.myReqData,
        thumbData:this.myThumbData,
        mainScore:this.myMainScore,
        diff:this.myDiff,
        commentData:{
          "userID": localStorage.getItem('uId'),
          "content": "",
          "mainScore": 0,
          "difficulty": 0,
          "token": localStorage.getItem("token")
        },
        currentPage:0,
        commentsList:[],
        commentTotal:0,
        viewBoxState:false,
        wviewImages:[],
        wViewIndex:1,
        picList:[]
      }
    },
    mounted(){
      this.commentData[this.myThumbKey] = this.$route.query.id;
      this.commentData[this.myPicListKey] = [];
      this.getComments();
    },
    methods:{
        // 请求评论列表
        getComments(){
          let that = this;
          let commentsProps = {
            url:this.Urls['commentUrl'],
            data:this.reqData,
            sCallBack:res => {
              if(res.data.code === 1){
                that.commentsList = res.data.data;
                that.commentTotal = res.data.total;
              }else{
                that.$message.error("请求出错，稍后再试");
              }
              that.$emit("getOver");
            },
            eCallBack:err => {
              console.log(err);
            }
          }
          Utils.myRequest(commentsProps);
        },
        showWView(lastImgLists, index){
          this.wViewIndex = index;
          this.wviewImages = lastImgLists;
          this.viewBoxState = true;
        },
        // 关闭大图显示
        closeView(){
          this.viewBoxState = false;
        },
        // 分页函数
        handleCurrentChange(val) {
          this.currentPage = val
          this.reqData['pageIndex'] = val - 1;
          this.$emit("loading");
          this.getComments();
        },
        // 点赞
        thumbComment(id, state, index){
          let that = this;
          this.thumbData['commentID'] = id;
          this.thumbData['type'] = (state === 0) ? 1 : 0;
          this.thumbData['token'] = localStorage.getItem('token');
          let thumbProps = {
            url : this.Urls['thumbUrl'],
            data:this.thumbData,
            sCallBack:res => {
              if (res.data.code === 1){
                that.commentsList[index]['praiseStatus'] = this.thumbData['type'];
                if(state === 0){
                  that.commentsList[index]['praiseCount'] += 1;
                }else{
                  that.commentsList[index]['praiseCount'] -= 1;
                }
              } else if(res.data.code === 4){
                that.refreshToken(that.thumbComment(id, state, index));
              }else{
                this.$message.warning("登录信息失效，请重新登录");
              }
            },
            eCallBack:err => {
              console.log(err);
            }
          }
          Utils.myRequest(thumbProps);
        },
        // 刷新token
        refreshToken(callBack){
          let refresh = {
            url:"/user/GetToken",
            data:{
              token:localStorage.getItem('token')
            },
            sCallBack:(res) => {
              localStorage.setItem("token", res.data.data)
              callBack && callBack();
            },
            eCallBack:(err) => {
              console.log(err);
            }
          }
          Utils.myRequest(refresh);
        },
        // 选择星级
        hoverStar(type, index){
          if(type === "mainScore"){
            this.commentData.mainScore = index + 1;
          }else{
            this.commentData.difficulty = index + 1;
          }
        },
        reloadPic(data){
          this.$emit("getOver");
          let Pic = {};
          if(data.flag && data.flag === "2"){
            Pic['fileName'] = data['fileName'];
            Pic['flag'] = 2;
            Pic['thumFileName'] = data['thumFileName'];
            Pic['description'] = "";
            Pic['length'] = 0;
            this.picList.unshift(Pic);
          }else{
            let upInfo = data.files;
            Pic['fileName'] = upInfo['url'];
            Pic['flag'] = 1;
            Pic['thumFileName'] = "";
            Pic['description'] = "";
            Pic['length'] = 0;
            this.picList.push(Pic);
          }
       },
       uploadStateFun(){
          this.$emit("loading");
       },
       // 提交评论内容
       subComment(){
          if(this.commentData['mainScore'] === 0 && this.mainScore == true){
              this.$message.warning("请选择综合评分");
              return false;
          }
          if (this.commentData['difficulty'] === 0 && this.diff == true){
              this.$message.warning("请选择难度系数");
              return false;
          }
         if (this.commentData['content'] === ""){
           this.$message.warning("请输入评价内容");
           return false;
         }
         this.$emit("loading");
         let that = this;
         this.commentData.token = localStorage.getItem("token");
         this.commentData[this.myPicListKey] = this.picList;
          let subCommentProps = {
            url:this.Urls.subCommentUrl,
            data:this.commentData,
            sCallBack:res => {
                if(res.data.code === 1){
                    that.$message.success("评论提交成功");
                    that.commentData.mainScore = 0;
                    that.commentData.difficulty = 0;
                    that.commentData.content = '';
                    that.commentData[this.myPicListKey] = [];
                    that.picList = [];
                    that.getComments();
                }else if(res.data.code === 4){
                    that.refreshToken(that.subComment());
                }else{
                  that.$message.error("评论提交失败,稍后重新登录再试");
                }
            },
            eCallBack:err => {
                console.log(err);
            }
          }
          Utils.myRequest(subCommentProps);
       },
      // 删除提交的图片
      delPic(index){
          this.picList.splice(index, 1);
      }
    }
  }
</script>

<style scoped>
  @import "../assets/animate.min.css";
  #videoShadow{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    position: fixed;
    top:0px;
    left:0px;
    z-index:99999;
  }
  #videoPlayBox{
    width:600px;
    height:480px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-240px;
    margin-left:-300px;
    padding:6px;
    background:rgba(221,221,221,0.4);
    border-radius:8px;
    display:none;
  }
  #wviewBox{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index: 9999;
  }
</style>
